<!doctype html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
  <title>core-ajax-response-and-error</title>

  <script src="../../../platform/platform.js"></script>
  <script src="../../../polymer-test-tools/chai/chai.js"></script>
  <script src="../../../polymer-test-tools/htmltest.js"></script>

  <link rel="import" href="../../core-ajax.html">

</head>
<body>

  <polymer-element name="race-condition">
    <template>
      <style>section {margin-top: 20px;}</style>
      <core-ajax
          id='ajax'
          url="http://httpbin.org/delay/{{delay}}"
          handleas="json" auto
          response="{{response}}"
          on-core-response="{{handleResponse}}"></core-ajax>
      <div>Response url: {{response.url}}</div>
      <div>Result: {{testResult}}</div>

      <section>
        <div>Requests</div>
        <ul>
          <template repeat='{{request in requests}}'>
            <li>
              {{request.delay}} second delay, Status: {{request.statusText}}
            </li>
          </template>
        </ul>
      </section>
    </template>
    <script>
      Polymer({
        delay: 1,
        response: null,
        testResult: 'pending...',
        passed: false,
        requests: [],
        observe: {
          '$.ajax.activeRequest': 'requestChanged'
        },
        domReady: function() {
          setTimeout(function() {
            if (this.response != null) {
              console.error('HTTP request returned too quick!')
              chai.assert.fail(
                  '', '',  'Indeterminate, initial request returned too quick');
              this.testResult = 'indeterminate';
              return;
            }
            this.delay = 2;
          }.bind(this), 100);
          // This will fail the test if it neither passes nor fails in time.
          this.finalTimeout = setTimeout(function() {
            chai.assert.fail('', '', 'Test timed out.');
          }, 7000);
        },
        responseChanged: function() {
          if (this.response.url != this.$.ajax.url) {
            this.testResult = 'FAIL';
            chai.assert.fail(this.$.ajax.url, this.response.url,
                             'Race condition in response attribute');
            return;
          }
          this.passed = true;
        },
        passedChanged: function() {
          if (this.passed && this.testResult == 'pending...') {
            this.testResult = 'PASS';
            clearTimeout(this.finalTimeout);
            done();
          }
        },
        requestChanged: function(o, n) {
          this.requests.push({
            'statusText': 'pending',
            xhr: n,
            delay: this.delay
          });
        },
        handleResponse: function(resp) {
          var xhr = resp.detail.xhr;
          for (var i = 0; i < this.requests.length; i++) {
            if (this.requests[i].xhr === xhr) {
              this.requests[i].statusText = xhr.statusText;
            }
          }
        },
      });
    </script>
  </polymer-element>

  <race-condition></race-condition>
</body>
</html>
